<template>
  <a-layout class="layout-demo">
    <a-layout-header>
      <deskHeader />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        v-if="renderMenu"
        v-show="!hideMenu"
        :width="menuWidth"
        :collapsed="collapsed"
        :collapsible="true"
        :hide-trigger="true"
        @collapse="setCollapsed"
      >
        <deskMenu />
      </a-layout-sider>
      <a-drawer v-if="hideMenu" :visible="drawerVisible" placement="left" mask-closable :closable="false" @cancel="drawerCancel">
        <deskMenu />
      </a-drawer>

      <a-layout class="layout-content" :style="{ background: theme == 'light' ? 'var(--color-fill-2)' : 'rgb(var(--gray-2))' }">
        <deskCrumbs />
        <a-layout-content>
          <router-view class="layout-demo-commmit" :key="$route.fullPath" />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import deskMenu from '@com/deskMenu/deskMenu.vue';
import deskHeader from '@com/deskHeader/deskHeader.vue';
import deskCrumbs from '@com/deskCrumbs/deskCrumbs.vue';
import { useAppPinia } from '@pinia/modules/app';

import { computed, onMounted, provide, ref } from 'vue';
import useResponsive from '@utils/responsive';

export default {
  components: {
    deskMenu,
    deskHeader,
    deskCrumbs,
  },
  setup() {
    useResponsive(true);

    const appPinia = useAppPinia();
    const theme = computed(() => {
      return appPinia.theme;
    });
    const menuWidth = computed(() => {
      return appPinia.menuCollapse ? 48 : appPinia.menuWidth;
    });
    const collapsed = computed(() => {
      return appPinia.menuCollapse;
    });
    const drawerVisible = ref(false);
    const hideMenu = computed(() => appPinia.hideMenu);
    const renderMenu = computed(() => appPinia.menu && !appPinia.topMenu);

    const drawerCancel = () => {
      drawerVisible.value = false;
    };
    provide('toggleDrawerMenu', () => {
      drawerVisible.value = !drawerVisible.value;
    });

    const setCollapsed = () => {
      // console.log('触发折叠展开事件');
    };

    return {
      collapsed,
      menuWidth,
      theme,
      drawerVisible,
      hideMenu,
      renderMenu,
      drawerCancel,
      setCollapsed,
    };
  },
};
</script>
<style scoped>
.layout-demo {
  height: 100vh;
  box-sizing: border-box;
}

.layout-demo :deep(.arco-layout-header) {
  height: 58px;
  line-height: 58px;
  background: var(--color-bg-3);
  border-bottom: 1px solid var(--color-border);
}

.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}

.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  flex: unset;
  /*background: var(--color-bg-3);*/
}

.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-content {
  padding: 15px;
  height: calc(100vh - 100px);
  background-color: var(--color-fill-2);
  overflow: auto;
}

:deep(.arco-layout-sider) {
  height: calc(100vh - 60px);
}

:deep(.arco-menu) {
  height: 100%;
}
</style>
